<template>
	<view style="text-align: center;">
		<view style="margin-top: 100px;">
			<image :src="iconFilepath" @click="chooseImage()" mode="aspectFill" class="round-img"></image>
		</view>
		<view style="margin-top: 30rpx; width: 100%;">
			<button @click="chooseAndShowImage" class="func-btn">选择图片显示</button>
			<button @click="previewImage(chooedImages)" class="func-btn">预览图片</button>
			<button @click="getImageDetails" class="func-btn">获取图片信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilepath: "/static/logo.png",
				chooedImages: []
			}
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log("updateImage choose:" + res.tempFilePaths[0]);
						this.iconFilepath = res.tempFilePaths[0];
						this.chooedImages = res.tempFilePaths;
						console.log("success showimage ---");
						this.previewImage(this.chooedImages);
					}
				});
			},
			previewImage(images) {
				console.log("previewImage");
				uni.previewImage({
					urls: images
				})

			}
		}

	}
</script>

<style>
	.round-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.func-btn {
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 30rpx auto;
		background-color: #ffffff;
		border: 1px solid #eeeeee;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333333;
	}
</style>